<template>
  <div>
    <el-dialog
      custom-class="my-dialog"
      title="个人信息"
      :visible="true"
      width="340px"
      :close-on-click-modal="true"
      :before-close="closeUserInfo"
    >
      <div class="userinfo">
        <div class="user-avatar">
          <img :src="avatar || '/static/img/no_avatar.png'" />
        </div>
        <div class="nickname">{{ nickname || '未设置昵称' }}</div>
        <div v-if="user_id" class="mid">MID：{{ user_id }}</div>
        <div class="logout">
          <el-button type="text" size="mini" @click="logout">退出登录</el-button>
        </div>
        <div class="balance">
          <div class="th">VIP会员</div>
          <div class="th">剩余次数</div>
          <div class="td" v-if="vip_expire_time">
            <p>{{ vip_expire_time }} 到期</p>
            <el-button type="text" size="mini" @click="showVip">续费</el-button>
          </div>
          <div class="td" v-else>
            <p>未开通</p>
            <el-button type="text" size="mini" @click="showVip">立即开通</el-button>
          </div>
          <div class="td">
            <p>{{ balance }} 次</p>
            <el-button type="text" size="mini" @click="showGoods">充值</el-button>
          </div>
          <div class="tips" v-if="vip_expire_time">提示：vip期间不消耗次数</div>
          <div class="tips" v-else>提示：开通vip不限次数</div>
          <div style="clear: both;"></div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  name: 'Userinfo',
  computed: {
    ...mapGetters([
      'user_id',
      'avatar',
      'nickname',
      'vip_expire_time',
      'balance'
    ])
  },
  methods: {
    closeUserInfo() {
      this.$emit('close')
    },
    showVip() {
      this.$emit('showVip')
    },
    showGoods() {
      this.$emit('showGoods')
    },
    async logout() {
      await this.$store.dispatch('user/logout')
      this.closeUserInfo()
      window.location.reload()
    }
  }
}
</script>

<style lang="scss" scoped>
  .userinfo {
    text-align: center;
    letter-spacing: 1px;
    padding-bottom: 40px;
    .user-avatar {
      img {
        width: 72px;
        height: 72px;
        border-radius: 36px;
      }
    }
    .mid {
      font-size: 12px;
      line-height: 24px;
    }
    .nickname {
      font-size: 15px;
      line-height: 32px;
    }
    .balance {
      margin: 20px 0;
      .th, .td {
        width: 50%;
        background: #f0f2f4;
        float: left;
        line-height: 32px;
        font-size: 14px;
      }
      .td {
        background: #fff;
        color: #444;
        font-size: 13px;
      }
      p {
        margin: 0;
        padding:0;
      }
      .tips {
        color: red;
        font-size: 12px;
        width: 100%;
        float: left;
        position: absolute;
        left: 0;
        bottom: 0;
        background: #f3f6f9;
        padding: 10px 20px;
        text-align: left;
      }
      &::after {
        clear: both;
      }
    }

    .logout {
      margin-top: 10px;
    }
  }
</style>
